<template>
  <view>
    <!-- 1.搜索标题 -->
    <view class="search-box">
      <uni-search-bar cancelButton="none" @input="input"></uni-search-bar>
    </view>
    <!-- 2.搜索列表 -->
    <view class="sugg-list" v-if="searchList.length">
       <view class="sugg-item" @click="gotoDetail(item)" v-for="(item,i) in searchList" :key="i">
          <view class="goods-name">{{item.goods_name}}</view>
          <uni-icons type="arrowright" size="17"></uni-icons>
       </view>
    </view>
    <!-- 3.搜索历史 -->
    <view class="history-list" v-else>
       <view class="history-title">
          <text>搜索历史</text>
          <uni-icons type="trash" @click="clearHistory"></uni-icons>
       </view>
       <view class="history-item">
            <uni-tag  inverted="true"
             @click="gotoShopList(item)"
             v-for="(item, i) in historyList" 
             :key="i" :text="item"></uni-tag>
       </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timeId: 0,
        keywords: '', // 搜索关键字
        searchList: [], // 搜索列表
        historyList:[] // 搜索历史
      };
    },
    onLoad () {
      // 从本地存储获取搜索历史记录
      this.historyList = JSON.parse(uni.getStorageSync('kw')) || [];
      console.log(this.historyList);
    },
    methods: {
      gotoShopList (keywords) {
        uni.navigateTo({
           url:'/subpkg/shop_list/shop_list?query=' + keywords
        })
      },
      clearHistory () {
         this.historyList = [];
         uni.setStorageSync('kw','[]')
      },
      // 跳转详情
      gotoDetail (item) {
         uni.navigateTo({
           url:'/subpkg/good_detail/good_detail?goods_id=' + item.goods_id
         })
      },
      async getSearchList() {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/goods/qsearch', {
          query: this.keywords
        });
        if (res.meta.status !== 200) return uni.$showMsg();
        this.searchList = res.message;
      },
      input(value) {
        clearTimeout(this.timeId)
        this.timeId = setTimeout(() => {
          this.keywords = value;
          if (this.keywords.trim() == '') {
            return;
          }
          
          // this.historyList.push(value);
          // unshift从数组最前面添加数据
          // unshift 会修改原数组historyList
          this.historyList.unshift(value);
          // 对数组historyList 去重
          this.historyList = Array.from(new Set(this.historyList)) ;    
          // 本地存储 historyList
          uni.setStorageSync('kw', JSON.stringify(this.historyList));
          // 获取搜索列表
          // this.getSearchList();
        }, 500)
      }
    }
  }
</script>

<style lang="scss">
page {
  height: 100vh;
  background-color: #fff;
}
.sugg-list{
   padding: 0 5px;
   background-color: #fff;
   .sugg-item {
     font-size: 12px;
     padding: 13px 0;
     display: flex;
     justify-content: space-between;
     border-bottom: 1px solid #efefef;
     .goods-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: 3px;
     }
   }
}

.history-list {
  padding: 0 5px;
  background-color: #fff;
  .history-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    border-bottom: 1px solid #efefef;
  }
  .history-item {
     .uni-tag {
       margin: 10px;
     }
     .uni-tag--inverted  {
       border: none !important;
     }
  }
}

</style>
